<!DOCTYPE html>

<html class="no-js" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 

<head th:replace="common/sections :: header-css"/>

<body>


	<!-- Left Panel -->
	<aside th:replace="common/menus :: left-panel"></aside>

    <!-- Right Panel -->
	<div id="right-panel" class="right-panel">
	
		<header th:replace="common/menus :: rp-header"/>
		
		<div th:replace="common/menus :: rp-breadcrumbs (pageTitle='View External Accounts')"/>
    
    	<!-- Page Content Begin -->
    
	    	<div class="content mt-3">
	            <div class="animated fadeIn">
	            
	            	<div class="form-group text-left">
              			<div class="sufee-alert alert with-close alert-danger alert-dismissible fade show" th:if="${errorMsg}">
                       		<span class="badge badge-pill badge-danger">Error</span>
                        	<span th:text="${errorMsg}"></span>
                         	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
                           		<span aria-hidden="true">&times;</span>
                       		</button>
                   		</div>
              		</div>
	            
	                <div id="firstRow" class="row">
	                			
		    			<div class="col-md-6 col-lg-3" th:each="acct : ${accountList}">
	                        <div class="card bg-flat-color-3 text-dark"> 
	                        	<form th:action="@{/obp/obp-view}" method="get" id="cardForm">
		                            <div class="card-body">
		                     
		                            	<label class="switch switch-text switch-primary switch-pill float-right">
		                                	<input type="checkbox" onclick="getCardDetails()" class="switch-input" name="selectSwitch" th:value="${acct.id}" th:checked="${acct.id==selectId}">
		                                		<span data-on="On" data-off="Off" class="switch-label"></span> 
		                                		<span class="switch-handle"></span>
		                                </label>
		                                
		                                <div class="h4 m-0" th:text="${acct.accountName}" contenteditable=false></div>
		                                <div><small class="text-dark" th:text="'Bank: ' + ${acct.bankName}"></small></div>
		                                <div><small class="text-dark" th:text="'Account Number: ' + ${acct.accountNumber}"></small></div>
		                                <div><br></div>
		                                <div class="h4 m-0" th:text="'Balance: $' + ${acct.accountBalance}"></div>
		                                
		                                <label class="float-right">
		                                	<input type="checkbox" onclick="deleteCard()" class="fa fa-minus-circle" name="deleteId" th:value="${acct.id}">
		                                </label>
		                            </div>
	                            </form> <!-- End form -->
	                        </div> <!-- End Card -->
	                    </div><!-- End Column 6-->
                	</div> <!-- End Row -->
                
                	<div class="row">
	                	<div class="col-md-12">
	                    	<div class="card">
		                        <div class="card-header bg-secondary">
		                            <strong class="card-title text-light">Transactions</strong>
		                        </div>
		                        <div class="card-body">
		                        	<table id="transactionTable" class="table table-striped table-bordered">
					                    <thead>
					                      <tr class="bg-secondary text-light">
					                        <th data-field="date" data-sortable="true">Date</th>
					                        <th data-field="description" data-sortable="true">Description</th>
					                        <th data-field="amount" data-sortable="true">Amount</th>
					                        <th data-field="balance" data-sortable="true">Balance</th>
					                      </tr>
					                    </thead>
					                    <tbody>
					                        <tr th:each="trans : ${transactionList}">
					                        <td th:text="${trans.details.completed}"></td>
					                        <td th:text="${'(' + trans.details.type +') - ' + trans.details.description}"></td>
					                        <td th:text="'$' + ${trans.details.value.amount}"></td>
					                        <td th:text="'$' + ${trans.details.new_balance.amount}"></td>
					                      </tr> 
					                   </tbody>
		                  			</table>
		                        </div> <!-- End Card Body -->
	                    	</div> <!-- End Card -->
	                	</div>   <!-- End Column 12 -->
	           		</div> <!--  End Row -->
	           		
	           		<div th:if="${noAccounts}">
           			<button type="button" id="showModal" style="display: none;" data-toggle="modal" data-target="#emptyAccounts"></button> 
	 			</div> 
	           
	    		</div><!-- .animated -->
			</div><!-- .content -->
	    
	    <!-- Page Content End -->
	    
	</div> <!-- End right panel -->
	
	<div th:if="${noAccounts}" class="modal fade" id="emptyAccounts" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true" data-backdrop="static">
       	<div class="modal-dialog modal-lg" role="document">
           	<div class="modal-content">
               	<div class="modal-header">
                   	<h5 class="modal-title" id="largeModalLabel">No Linked Accounts</h5>
                   </div>
                   <div class="modal-body">
                   	<p>You currently do not have any linked accounts on record to view. Please link an external account.</p>
                   </div>
                   <div class="modal-footer">
                       	<a th:href="@{/obp/obp-add}"><button type="button" class="btn btn-primary">Continue</button></a>
                   </div>
           	</div>
        </div>
    </div>
	
	
    
	<!-- Footer -->
	<div th:replace="common/sections :: footer-scripts"></div>
	
	<script th:src="@{/js/lib/data-table/datatables.min.js}"></script>
    <script th:src="@{/js/lib/data-table/dataTables.bootstrap.min.js}"></script>
    <script th:src="@{/js/lib/data-table/dataTables.buttons.min.js}"></script>
    <script th:src="@{/js/lib/data-table/buttons.bootstrap.min.js}"></script>
    <script th:src="@{/js/lib/data-table/jszip.min.js}"></script>
    <script th:src="@{/js/lib/data-table/pdfmake.min.js}"></script>
    <script th:src="@{/js/lib/data-table/vfs_fonts.js}"></script>
    <script th:src="@{/js/lib/data-table/buttons.html5.min.js}"></script>
    <script th:src="@{/js/lib/data-table/buttons.print.min.js}"></script>
    <script th:src="@{/js/lib/data-table/buttons.colVis.min.js}"></script>
    <script th:src="@{/js/lib/data-table/datatables-init.js}"></script>
    
	<script type="text/javascript">
	
		$('#transactionTable').DataTable({
		       'order': []
		} );
		
		// Handle new card to view or delete
		form=document.getElementById("cardForm");
		
		function getCardDetails () {
		        form.action="/bank/obp/obp-view";
		        form.submit();
		}
		
		function deleteCard () {
		        form.action="/bank/obp/obp-delete";
		        form.submit();
		}
	
   	</script>
   	
   	<div th:if="${noAccounts}"><script>document.getElementById("showModal").click();</script></div>

</body>
</html>
